<div class="waper">
  <div style="width:15%;">
    <h2> 属性指令</h2>
    <strong appHighlight>使用HostListener为元素添加事件</strong>
    <p [appHighlight]="color" author="attribute author">
      为元素添加自定义属性并使用@Attribute()读取属性
      <br> 使用输入型的属性指令
    </p>
    <br>
    <strong>使用HostBinding为元素添加属性，点击按钮</strong>
    <br>
    <button hostbindingd>HostBinding</button>
    <button httplisten>http</button>
    <h2> Directive方式实现事件</h2>
    <button hostlisten (emData)="emDatas($event)">hostlisten</button>
    <br>
    <button (click)="reg()">正则表达式</button>
    <br>
    <button (click)="es6()">一些es6方法</button>
  </div>
  <div style="width:40%;">
    <h2>ng-template</h2>
    <ng-container *ngTemplateOutlet="tpl"></ng-container>
    <ng-template #tpl>
      <p>ng-template属于后加载的，作为行元素放在当前组件，不与先加载 的一起构成DOM结构，若不指定 ngTemplateOutlet，是不会显示出来的。
        <br>若是用createEmbeddedView() 动态创建的，会作为当前整个页面的子元素append进去
      </p>
    </ng-template>
    <div>
      <h2>
        <h4>用createEmbeddedView() 动态创建ng-template，点击按钮看页面最底下</h4>
      </h2>
      <button (click)="createEmbeddedViews()">createEmbeddedViews</button>
    </div>
    <h2>ng-container</h2>
    <button (click)="ngIfs=!ngIfs">clickHere</button>
    <ng-container *ngIf="ngIfs">
      <strong style="color:rgb(16, 236, 100);">ngIf with an ng-container. </strong>
    </ng-container>
    <h2>鼠标事件区分</h2>
    <div>
      <strong style="color:rgb(236, 16, 71);">onmouseenter: </strong> 事件在鼠标指针移动到元素上时触发。
      <br> 提示： 该事件通常与onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
      <br> 提示： onmouseenter 事件类似于onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。
      <br>
      <strong style="color:rgb(236, 16, 71);">onmouseleave: </strong> 事件在鼠标移除元素时触发。
      <br> 提示： 该事件通常与onmouseenter 事件一起使用，该事件在鼠标移动到元素上时触发。
      <br> 提示: onmouseleave 事件类似于onmouseout 事件。 唯一的区别是 onmouseleave 事件不支持冒泡 。
      <br>
      <strong style="color:rgb(236, 16, 71);">onmousemove:</strong> 当用户移动鼠标时引发该鼠标移动事件。
      <br>
      <strong style="color:rgb(236, 16, 71);">onmouseout:</strong> 当鼠标离开元素时会引发鼠标移出事件。
      <br>
      <strong style="color:rgb(236, 16, 71);">onmouseover:</strong> 当用户将鼠标移动到特定元素上时引发的鼠标悬停事件。
      <br>
      <strong style="color:rgb(236, 16, 71);">onmouseup:</strong> 当用户释放鼠标按钮时会引发mouseup事件。
      <br>
      <strong style="color:rgb(236, 16, 71);">onmousedown:</strong> 在当用户按下鼠标按钮时，将引发mousedown事件。
      <p style="color:rgb(20, 16, 236);">
        如果事件宿主 z-index 层级低，容易发生闪烁，左边的会闪，右边的不会。
        <br>试试鼠标分别放在绿块的文字上和文字下边
      </p>
      <div class="mouseEvent">
        <div>
          <div (mousemove)="Move($event)" (mouseout)="Out($event)">
            move
            <div *ngIf="moveNum" class="innerDiv">{{moveNum}}</div>
          </div>
          <div (mouseout)="Out($event)" (mouseover)="Over($event)">
            out，over
            <div *ngIf="type=='over'" class="innerDiv">{{type}}</div>
          </div>
        </div>
        <div>
          <div (mouseenter)="Enter($event)" (mouseleave)="Leave($event)">
            enter，leave
            <div *ngIf="type=='enter'" class="innerDiv">{{type}}</div>
          </div>
          <div (mouseup)="Up($event)" (mousedown)="Down($event)">
            <span [ngStyle]="{color:type=='up'?'red':''}">up</span> ，down
            <div *ngIf="type=='down'" class="innerDiv">{{type}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div style="width:25%;">
    <h2>ViewChildren</h2>
    <p>将多个组件B、C放到一个组件A内，形成组件组， 然后将A组件放到这个组件组应该安放的位置
    </p>
    <div style="border:1px dashed rgb(236, 16, 71);padding:10px;">
      <p>这是组件组最终应该放的位置</p>
      <app-ng-view></app-ng-view>
    </div>

  </div>

  <div style="width:20%;">
    <h2>ContentChildren</h2>
    <p>将组件A、B一起放到最终位置，但A标签内放入B标签，同时在A组件的html内，用 ng-content表明B组件应该显示的位置
    </p>
    <app-ng-content>
      <app-ng-content-child></app-ng-content-child>
    </app-ng-content>
  </div>
</div>

<div class="waper">
  <div style="width:20%;">
    <h2>自定义管道</h2>
    <div>
      <div *ngFor="let hero of (heroes | flyingHeroes)">
        {{hero.id}}
      </div>
    </div>
    <button (click)="toggles()">toggles</button>
    <div>
      <h2>使用innerHTML</h2>
      <div [innerHTML]="someHTML"></div>
    </div>

    <div>
      <h2>使用Array.from查找元素</h2>
      <button (click)="arrayFrom(1)">id="ticked1"</button>
      <button (click)="arrayFrom(2)">id="ticked2"</button>
      <button (click)="arrayFrom(3)">id="ticked3"</button>
      <p>
        常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，
        <br> 如果不用Array.from()，转一下，是没办法用filter进行过滤查找的
      </p>
      <h3 id="ticked1">h3 DOM1</h3>
      <h3 id="ticked2">h3 DOM2</h3>
      <h3 id="ticked3">h3 DOM3</h3>
    </div>


  </div>
  <div style="width:28%;">
    <h2>angular内建管道</h2>
    <div>
      <p ngNonBindable>1.大写转换：{{ 'Angular' | uppercase }}</p>
      <p class="outPut">{{ 'Angular' | uppercase }}</p>
    </div>
    <div>
      <p ngNonBindable>2.小写转换：{{ 'Angular' | lowercase }}</p>
      <p class="outPut">{{ 'Angular' | lowercase }}</p>
    </div>
    <div>
      <p ngNonBindable>3.数值格式化：{{ 3.14159265 | number: '1.0-3' }}</p>
      <p class="outPut">{{ 3.14159265 | number: '1.0-3' }}</p>
    </div>
    <div>
      <p ngNonBindable>4.日期格式化：{{ today | date: 'mediumTime' }}</p>
      <p class="outPut">{{ today | date: 'mediumTime' }}</p>
    </div>
    <div>
      <p ngNonBindable>5.日期格式化：{{ today | date: 'fullDate' }}</p>
      <p class="outPut">{{ today | date: 'fullDate' }}</p>
    </div>
    <div>
      <p ngNonBindable>6.日期格式化：{{today | date:'yyyy-MM-dd HH:mm aa'}}</p>
      <p class="outPut"> {{today | date:'yyyy-MM-dd HH:mm aa'}}</p>
    </div>
    <div>
      <p ngNonBindable>7.JavaScript 对象序列化：{{ { name: 'joy' } | json }}</p>
      <p class="outPut">{{ { name: 'joy' } | json }}</p>
    </div>
    <div>
      <p ngNonBindable>8.首字母转换：{{ 'anGular foo-vs-bar' | titlecase }}</p>
      <p class="outPut">{{ 'anGular foo-vs-bar' | titlecase }}</p>
      <p ngNonBindable>{{ 'one,two,three' | titlecase }}</p>
      <p class="outPut">{{ 'one,two,three' | titlecase }}</p>
    </div>
    <div>
      <p ngNonBindable>9.货币转换：{{1.3495 | currency:'¥':'true':'1.0-2'}}</p>
      <p class="outPut">{{1.3495 | currency:'¥':'true':'1.0-2'}}</p>
      <p>
        参考网址： https://en.wikipedia.org/wiki/ISO_4217
      </p>
    </div>
    <div>
      <p ngNonBindable>10.小数百分化显示：{{0.2365844 | percent:'1.0-5'}}</p>
      <p class="outPut">{{0.2365844 | percent:'1.0-5'}}</p>
    </div>
  </div>
  <div style="width:22%;">
    <div>
      <div>
        <h2>管道参数</h2>
        管道可以接收任意数量的参数，使用方式是在管道名称后面添加“ : ”和参数值。
        <br> 如 number: '1.4-4' ，若需要传递多个参数则参数之间用冒号隔开
        <br> 也可以将多个管道连接在一起，组成管道链对数据进行处理。具体示例如下：
      </div>
      <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
      <p>{{'semlinker' | slice:0:3 | uppercase }}</p>
    </div>
    <div>
      <div>
        <h2>管道切片</h2>
        如果参数是字符串，则对字符串进行截取，如果参数是数组，则对数据进行截取。
      </div>
      <strong>字符串</strong>
      <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
      <p>{{ 'semlinker' | slice:0:3}}</p>
      <strong>数组</strong>
      <p ngNonBindable>{{ *ngFor="let item of pipeSlice | slice:1:3"}}</p>
      <p *ngFor="let item of pipeSlice | slice:1:3">{{item}}</p>

    </div>
  </div>
  <div style="width:15%;">
    <h2>resolve</h2>
    <p>resolve要放到最终要获得数据的组件的路由配置上，无论是正常加载还是懒加载，都起作用</p>
    <span style="padding:10px;color:tomato;"> {{resolveDatas}}</span>
  </div>
  <div style="width:15%;">
    <h2>动态生成组件
      <br>3秒一换 {{time}}</h2>
    <button (click)="startAd()">startAd</button>
    <button (click)="closeRD()">closeRD</button>
    <ng-template #adhost></ng-template>
  </div>
</div>